/*
 * @Author: lusx 
 * @Date: 2020-04-15 14:09:07 
 * @Last Modified by: lusx
 * @Last Modified time: 2020-05-21 15:39:24
 */
import React from 'react';
import { toJS } from 'mobx';
import { Link } from 'react-router-dom';
import Header from './header'
import { Tabs } from 'weaver-mobile';
const prefixCls = 'overview'
export default class Overview extends React.Component {
     getmain=()=>{
        const { datas, hasheader = false, headerTitle = '', className = '' } = this.props;
        return(<main>
         <ul>
             {
                 datas.length > 0 && datas.map((data, index) => {
                     return (
                         <li key={index.toString()} className={`${prefixCls}-col`}>
                             <ul className={`${prefixCls}-wraps`}>
                                 {
                                     data.length > 0 && data.map(d => {
                                         return (
                                             <li key={d.id} >
                                                 <Link to={d.to}>
                                                     <div className={`${prefixCls}-cell-box`}>
                                                         <div className={`${prefixCls}-cell-box-top`}>{d.top}</div>
                                                         <div className={`${prefixCls}-cell-box-bottom`}>{d.bottom}</div>
                                                     </div>
                                                 </Link>
                                             </li>
                                         )
                                     })
                                 }
                             </ul>
                         </li>
                     )
                 })
             }
         </ul>
     </main>)  
     }
    render(){
        const { datas, hasheader = false, headerTitle = '', className = '' } = this.props;
        const tabs = [
            { title:'我的事项' },
            { title: '我的任务' },
          ];
        return (
            <div className={`${prefixCls} ${className}`}>
                  { hasheader ?<Tabs tabs={tabs}
                    initialPage={0}
                    onChange={(tab, index) => { this.tabClick(index) }}
                    // onTabClick={(tab, index) => { this.tabClick(index) }}
                >
                {/* {hasheader && <Header title={headerTitle}/>} */}
                {this.getmain()}
                </Tabs>:this.getmain()
                }
            </div>
        )
    }

    tabClick =(index) =>{
        const { init } = this.props.store;
        init({tasktype:index  });
    }
    
}